<?php 
require_once '../config.php';
require_once '../function.php';
checkLogin()
 ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Posts &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
  <script src="../static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
   <!-- //这头部的公共模块 -->
    <?php include_once "public/navbar.php" ?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>所有文章</h1>
        <a href="post-add.php" class="btn btn-primary btn-xs">写文章</a>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="page-action">
        <!-- show when multiple checked -->
        <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
        <form class="form-inline">
          <select id="category" name="" class="form-control input-sm">
            <option value="all">所有分类</option>
          </select>
          <select id="status" name="" class="form-control input-sm">
           <option value="all">所有状态</option>
            <option value="drafted">草稿</option>
            <option value="published">已发布</option>
            <option value="trashed">已删除</option>s
          </select>
          <input type="button" id="btn-filt" class="btn btn-default btn-sm" value="筛选"> 
        </form>
        <ul class="pagination pagination-sm pull-right">
          <!-- <li><a href="#">上一页</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">下一页</a></li> -->
        </ul>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>标题</th>
            <th>作者</th>
            <th>分类</th>
            <th class="text-center">发表时间</th>
            <th class="text-center">状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
<?php 
  // 需要声明一个$current_page变量。告知当前是哪个页面，以便aside.php处理是否展开
     $current_page = 'posts';

   ?>
   <!-- //这左部的公共模块 -->
  <?php include_once "public/aside.php" ?>

  <script src="../static/assets/vendors/jquery/jquery.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script>NProgress.done()</script>
  <script>

      //使用变量保存每一页获取多少条数据
    var pageSize =10;
       //声明一个变量，记录当前的是第几页数据
    var currentPage =1;
    //声明一个变量表示最大页码数
    var pageCount = 5;
//将生成表格的代码封装成一个函数
function makePageButton(){
    // 根据当前页计算出开始的页码和结束的页码
    //开始页码 = 当前页码 - 
    var start = currentPage -2;
    //如果开始页码数小于1的强制从1开始
    if(start <1){
      start =1;
    }
    //结束页码 = 开始页码 + 4
      var end = start + 4;
      //如果结束的页码数超过的页码总数，特殊处理：
      if( end > pageCount ){
        end = pageCount;
      }
    //生成动态页码
      var html ="";
      //判断当前是不是第一页
      if(currentPage !=1){
        //使用自定义属性记录按钮代表的页数
        html += '<li class="item" data-page="'+ (currentPage - 1) +'"><a href="javascript:;">上一页</a></li>';
      }
      //循环生成5个数字按钮
      for (var i = start; i <= end; i++) {
        if (i==currentPage) {
         html += '<li class="item active" data-page="'+ i +'"><a href="javascript:;">'+ i +'</a></li>'
        }else{
           html += '<li class="item" data-page="'+ i +'"><a href="javascript:;">'+ i +'</a></li>';
            }
        }
      //判断当前是否最后一页
      if(currentPage !=pageCount){
          html += '<li class="item" data-page="'+ (currentPage + 1) +'"><a href="javascript:;">下一页</a></li>';
      }
      $(".pagination").html(html);
}  
 //将动态生成的数据列表封装函数
function makeTable(data){
      //遍历数组生成新的元素之前，先把原来的内容清空
          $("tbody").empty();
          $.each(data,function(i,e){
           var str =`<tr  data-categoryid="${e.id}>
            <td class="text-center"><input type="checkbox"></td>
            <td style="width:100px;">${e.title}</td>
            <td>${e.nickname}</td>
            <td>${e.name}</td>
            <td class="text-center">${e.created}</td>
            <td class="text-center">${statusData[e.status]}</td>
            <td class="text-center">
              <a href="javascript:;" class="btn btn-default btn-xs">编辑</a>
              <a href="javascript:;" class="btn btn-danger btn-xs del">删除</a>
            </td>
          </tr>`;
          $(str).appendTo('tbody');
         });
};
//将文章的状态定义成一个键值对
var statusData = {
      drafted : '草稿',
      published : '已发布',
      trashed : '已作废'
}
$(function(){
// 第一次请求， 把数据请求回来，动态生成表格
  $.ajax({
     url:"api/_getPostsData.php",
     type:"POST",
     data:{currentPage: currentPage, pageSize : pageSize, status: $("#status").val(), categoryId:$("#category").val()},
     success: function(res){
       //如果请求成功把数据动态渲染出来
       if (res.code ==1) {
        var data = res.data;
        //计算出页码的最大值
        pageCount = res.pageCount;
         //生成分页结构
          var data = res.data;
           makePageButton();   
         //遍历data数组，生成表格结构
          makeTable(data);
       } 
     }
    });
     //第二次请求书据获取数据
     $(".pagination").on("click",".item",function(){
  //获取按钮代表的页码;
  currentPage = parseInt($(this).attr('data-page'));
  //根据当前页码到服务端获取带护具
  $.ajax({
       url:"api/_getPostsData.php",
       type:"POST",
       data:{currentPage: currentPage, pageSize : pageSize, status: $("#status").val(), categoryId:$("#category").val()},
       success :function(res){
        //切换页码的代码应该爱获取数据成功之后处理
        if( res.code == 1 ){
              // 重新设置页码的最大值
              pageCount = res.pageCount;
               var data = res.data;
              // 要重新生成分页结构
              makePageButton();
              makeTable(data);
       }
     }
    })
  })
     //进行筛选操作
     $.ajax({
        url : "api/_getCategoryData.php",
        type : "POST",
        success : function(res){
          if( res.code == 1){
            // 遍历数组，生成多个下拉选项，追加到下拉框里面
            var data = res.data;
            $.each(data, function(i, e){
              var html = '<option value="' + e.id+ '">' + e.name +'</option>';
              $(html).appendTo("#category");
            });
          }
        }
       });
     //点击筛选按钮进行删选
     $("#btn-filt").on("click", function(){
        //点击筛选的时候，先得到状态是什么
        var status = $("#status").val();
        var categoryId = $("#category").val();
        // 把条件待会服务器请求数据
        $.ajax({
          url : "api/_getPostsData.php",
          type : "POST",
          data : {currentPage: currentPage, pageSize: pageSize, status: status, categoryId:categoryId},
          success : function(res){
            console.log(res);
            //再次生成表格
            if(res.code == 1){
              //遍历数组生成新的元素之前，先把原有的内容清空
              $("tbody").empty();
              var data = res.data;
              makeTable(data);
            }
          }
        });
      });
//进行删除操作
$("tbody").on("click",".del",function(){
   //先把当前点击的行记录下来，当删除成功的时候，我们就把这一行删掉即可
   var row = $(this).parents("tr");
   //根据当前点击的按钮对应的行，得到起对应的id,在数据库中删除数据
   //首先获取要删除的数据的id 
   var categoryId = row.attr("data-categoryid");
   //把要删除的id发回服务器
   $.ajax({
  type:"POST",
  url:"api/del.php",
  data:{id:categoryId},
  success :function(res){
    //如果删除成功，也要把对应的行删除
    if(res.code ==1){
      //要把对应的行删掉
      row.remove();
    }
  }
   })
})





});
  </script>
</body>
</html>
